<!-- 底部导航 -->
<template>
	<view class="cu-bar tabbar bg-white foot">
		<view class="action" :class="{'add-action':index==1}" v-for="(item,index) in tabbar" :key="index" @click="navigate(item)">
			<view class='cuIcon-cu-image'>
				<image :src="pageCur==index ? item.selectedIconPath : item.iconPath"></image>
			</view>
			<!-- <view :class="pageCur==index?'text-blue':'text-gray'">{{item.text}}</view> -->
		</view>
	</view>
</template>
<script>
	/**
	 * 底部导航
	 * @property {Number} pageCur - 当前选中的页签
	 */
	export default {
		props: {
			pageCur: {
				type: Number,
				default: 0
			},
			// tabbarList: {
			// 	type: Array,
			// 	default: []
			// }
		},
		data() {
			return {
				tabbar: [{
						"pagePath": "/pages/index/index",
						"text": "首页",
						"iconPath": "../../static/img/home_normal.png",
						"selectedIconPath": "../../static/img/home_hover.png",
						"name":'home'
					},
					{
						"pagePath": "/pages/index/setting",
						"text": "扫一扫",
						"iconPath": "../../static/img/saoyisao.png",
						"selectedIconPath": "../../static/img/saoyisao.png",
						"name":'sao'
					},
					{
						"pagePath": "/pages/index/user",
						"text": "我的",
						"iconPath": "../../static/img/mine_normal.png",
						"selectedIconPath": "../../static/img/mine_hover.png",
						"name":'my'
					}
				]
			};
		},
		created() {

		},
		methods: {
			// 底部导航栏切换
			navigate(item){
				uni.navigateTo({
					url: item.pagePath
				})
			}
		}
	};
</script>
<style>
	.cu-bar.tabbar .action .cuIcon-cu-image image {
		width: 80upx;
		height: 80upx;
		display: inline-block;
	}
	.cu-bar.tabbar .add-action .cuIcon-cu-image {
		width: 120upx;
		height: 150upx;
		overflow: hidden;
		top: -50upx;
	}
	.cu-bar.tabbar .add-action .cuIcon-cu-image image {
		width: 150upx;
		height: 120upx;
		display: inline-block;
	}
</style>
